<template>
  <div class="login_bg">
    <!-- 登录盒子 -->
    <div>
      <!-- 登录表单部分 -->
      <div class="login_box" v-show="!isShow">
        <!-- 头像盒子 -->
        <div class="avatar_box">
          <img src="../../assets/left1.jpg" alt="" />
        </div>
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" class="login_form">
          <el-form-item prop="adminname">
            <el-input v-model="loginForm.adminname" prefix-icon="iconfont icon-yonghu" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" prefix-icon="iconfont icon-mima" placeholder="请输入密码" type="password"></el-input>
          </el-form-item>
          <!-- 按钮区域 -->
          <div class="btns">
            <div>
              <el-button type="success" @click="login">登录</el-button>
              <el-button type="danger" @click="reset">重置</el-button>
            </div>
            <div>
              <el-button @click="goRegister">注册</el-button>
            </div>
          </div>
        </el-form>
      </div>
      <div class="reg_box" v-show="isShow">
        <el-form :model="registerForm" :rules="registerRules" ref="registerFormRef">
          <el-form-item label="管理员ID" prop="userId">
            <el-input v-model="registerForm.userId" placeholder="请输入管理员ID" clearable></el-input>
          </el-form-item>
          <el-form-item label="管理员名称：" prop="username">
            <el-input v-model="registerForm.username" autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input type="password" v-model="registerForm.password" placeholder="请输入密码" autocomplete="off" clearable></el-input>
          </el-form-item>
          <el-form-item label="确认密码：" prop="confPassword">
            <el-input type="password" v-model="registerForm.confPassword" placeholder="请输入确认密码" autocomplete="off" clearable></el-input>
          </el-form-item>
          <div class="btns">
            <div>
              <el-button type="danger" @click="resetAdmin">重置</el-button>
              <el-button type="primary" @click="adminRegister">提交</el-button>
            </div>
            <div>
              <el-button @click="returnLogin">返回</el-button>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import bookShareManagerInfoAipService from '@/network/aipBookShareService.js'
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.registerForm.confPassword !== '') {
          this.$refs.registerFormRef.validateField('confPassword')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    var validateUserId = (rule, value, callback) => {
      let str = /^[a-zA-Z][a-zA-Z0-9]/.test(value)
      if (value === '') {
        callback(new Error('请输入管理员ID'))
      } else if (value.length <= 1 || value.length >= 13) {
        callback(new Error('管理员ID长度必须在 6 到 12 之间'))
      } else if (!str) {
        callback(new Error('管理员ID必须以字母开头,只能包含大写和数字'))
      } else {
        callback()
      }
    }
    var validateUserName = (rule, value, callback) => {
      let str = /^[^\u4e00-\u9fa5]+$/.test(value)
      if (value === '') {
        callback(new Error('请输入管理员名称'))
      } else if (value.length <= 1 || value.length >= 20) {
        callback(new Error('管理员名称长度必须在 1 到 20 个字符之间'))
      } else {
        callback()
      }
      /**
       * else if (!str) { callback(new Error('管理员名称不含有中文')) }
       */
    }
    return {
      // 表单的数据绑定对象
      loginForm: {
        adminname: '',
        password: ''
      },
      // 表单的验证规则对象
      loginFormRules: {
        adminname: [{ required: true, validator: validateUserName, trigger: 'blur' }],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      },
      isShow: false,
      // 注册表单
      registerForm: {
        userId: '',
        username: '',
        password: '',
        confPassword: ''
      },
      registerRules: {
        userId: [{ required: true, validator: validateUserId, trigger: 'blur' }],
        username: [{ required: true, validator: validateUserName, trigger: 'blur' }],
        password: [
          { required: true, validator: validatePass, trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '密码长度6到15个字符以内',
            trigger: 'blur'
          }
        ],
        confPassword: [
          { required: true, validator: validatePass2, trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '密码长度6到15个字符以内',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 管理员登录
    login() {
      this.$refs.loginFormRef.validate(valid => {
        if (!valid) {
          return
        }
        let temp = {
          username: this.loginForm.adminname,
          password: this.loginForm.password
        }
        bookShareManagerInfoAipService.adminLoginInfo(temp).then(res => {
          if (res.data.code === 0 && res.status === 200) {
            this.$message({
              showClose: true,
              message: '登录成功！',
              type: 'success',
              duration: 4000
            })
            // 存储当前用户名
            localStorage.setItem('adminname', this.loginForm.adminname)
            // 成功跳转首页
            this.$router.push('/home')
          } else {
            this.$message({
              showClose: false,
              message: '用户名或密码输入错误，请重新输入！',
              type: 'error',
              duration: 4000
            })
            return false
          }
        })
      })
    },
    // 管理员注册
    adminRegister() {
      this.$refs.registerFormRef.validate(valid => {
        if (!valid) return
        let temp = {
          password: this.registerForm.password,
          userId: this.registerForm.userId,
          username: this.registerForm.username,
          repassword: this.registerForm.password,
          realName: this.registerForm.username
        }
        bookShareManagerInfoAipService.adminRegisterInfo(temp).then(res => {
          if (res.data.code === 0) {
            this.$message({
              showClose: true,
              message: '恭喜您，注册成功！',
              type: 'success',
              duration: 4000
            })
          } else {
            this.$message({
              showClose: true,
              message: '抱歉，注册失败！',
              type: 'error',
              duration: 4000
            })
          }
        })
      })
    },
    // 显示注册模块
    goRegister() {
      this.isShow = true
    },
    // 显示登录框模块
    returnLogin() {
      this.isShow = false
    },
    // 表单重置
    reset() {
      this.$refs.loginFormRef.resetFields()
    },
    resetAdmin() {
      this.$refs.registerFormRef.resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.reg_box {
  padding: 50px 30px 0 30px;
  width: 450px;
  height: 600px;
  border-radius: 3px;
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  // less 语法嵌套
  .avatar_box {
    width: 130px;
    height: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}
.bottomBtn {
  text-align: center;
}
.login_bg {
  height: 100%;
  background: url('../../assets/img/bg_2.jpg');
  width: 100%;
  background-size: cover;
  box-sizing: border-box;
  z-index: 1;
}
.login_bg:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  /* 从父元素继承 background 属性的设置 */
  background: inherit;
  filter: blur(2px);
  z-index: 2;
}
.login_box {
  width: 450px;
  height: 300px;
  border-radius: 3px;
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  // less 语法嵌套
  .avatar_box {
    width: 130px;
    height: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}

.login_form {
  position: absolute;
  bottom: 30px;
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
}

.btns {
  display: flex;
  justify-content: space-between;
}
</style>
